<template>
  <div class="edit">
    <div class="head clear">
      <span class="left">头像</span>
      <div class="right">
        <img :src="info.head_pic" class="head-img" alt="">
        <img src="@/assets/bianjiziliao02.png" class="arrow-img" alt="">
      </div>
    </div>
    <div class="bind-phone block clear" v-show="info.mobile" @click="alert.is_show=true">
      <span class="left">绑定手机</span>
      <span class="right">{{info.mobile}}</span>
    </div>
    <div class="bind-phone block clear" v-show="!info.mobile" @click="router({path: './bindPhone'})">
      <span class="left">绑定手机</span>
      <span class="right">请绑定手机号</span>
    </div>
    <div class="block">
      <div class="flex">
        <span class="left">昵称</span>
        <span class="right user">{{info.nickname}}</span>
      </div>
    </div>
    <div class="block">
      <div class="flex">
        <datetime title="生日" min-year="1960" v-model="birthday_con"></datetime>
        <span class="right data"><span v-show="!birthday_con">请选择</span> <img class="right-img" src="@/assets/bianjiziliao02.png" alt=""></span>
      </div>
    </div>
    <div class="block">
      <div class="flex">
        <popup-picker title="性别" :data="sex_list" v-model="sex_con" placeholder="请选择"></popup-picker>
        <img class="right-img" src="@/assets/bianjiziliao02.png" alt="">
      </div>
    </div>
    <div class="block">
      <div class="flex border-none">
        <popup-picker title="职业" :data="job_list" v-model="job_con" placeholder="请选择"></popup-picker>
        <img class="right-img" src="@/assets/bianjiziliao02.png" alt="">
      </div>
    </div>
    <span class="btn" @click="submit">保存</span>
    <alert-box :alert-message = "alert"  v-if="alert"></alert-box>
  </div>
</template>

<script>

import { info, job, editSave } from '@/api/api'
import { PopupPicker, Datetime, AlertModule } from "vux"
import alertBox from '@/components/alertBox'
  export default {
    components: {
      alertBox,
      PopupPicker,
      Datetime,
    },
    data () {
      return {
        alert: {},
        info: {},
        job_con: [],
        job_list: [],
        sex_list: [["保密", "男", "女"]],
        sex_con: ["保密"],
        birthday_con: "",
        sex_num: "",
      }
    },
    created () {
      this.alert = {
        tip: '手机号已绑定，不允许修改',
        btn: '确定',
        path: {path: '/edit'},
        is_show: false
      }
      this.persona()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      persona(){
        info().then((res) =>{
          this.info=res.data.data
          this.birthday_con = this.info.birthday
          this.jobs()
        }).catch((err) => {
          console.dir(err)
        })
      },
      jobs() {
        job().then((res) => {
          var lists = [];
          for(var i in res.data.data.list){
            lists.push(res.data.data.list[i].job_name)
          }
          if(this.info.vocation){
            this.job_con.push(this.info.vocation)
          }else{
            this.job_con.push(lists[0])
          }
          this.job_list.push(lists)
        }).catch((err) => {
          console.dir(err)
        })
      },
      submit() {
        if(this.sex_con[0] == "保密"){
          this.sex_num = 0;
        }else if(this.sex_con[0] == "男"){
          this.sex_num = 1;
        }else if(this.sex_con[0] == "女"){
          this.sex_num = 2;
        }
        let dataJson = {
          birthday: this.birthday_con,
          sex: this.sex_num,
          vocation: this.job_con[0]
        }
        console.log(dataJson)
        if(!this.birthday_con){
          AlertModule.show({
            title: '温馨提示',
            content: '内容不能为空',
          })
          return;
        }
        editSave(dataJson).then((res) => {
          if(res.data.code == 200){
            AlertModule.show({
              title: '温馨提示',
              content: '保存成功',
              onHide: () => {
                this.$router.push({path: './personal'});
              }
            })
          }
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.edit
  height 100vh
  background-color #f5f5f5
  .head
    background-color #fff
    margin-bottom 1rem
    position relative
    padding 0 1.5rem
    .left
      float left
      color #202020
      font-size 1.5rem
      line-height 7.8rem
    .head-img
      position absolute
      width 5.9rem
      right 3.2rem
      top 1rem
      height 5.9rem
      border-radius 50%
    .arrow-img
      position absolute
      width .6rem
      right 1.5rem
      top 3.4rem
  .bind-phone
    margin-bottom 1rem
  .block
    background-color #fff
    line-height 5rem
    height 5rem
    color #202020
    font-size 1.5rem
    padding 0 1.5rem
    display flex
    .left
      flex 1
      text-align left
    .right
      flex 1
      text-align right      
    .flex.border-none
      border-bottom none
    .flex
      border-bottom 1px solid #e6e6e6
      display flex
      width 100%
      position relative
      .right
        color #999
      .right.user
        color #333
      .data
        position relative
        padding-right 2rem
      .right-img
        position absolute
        width .6rem
        top 2rem
        right 0
  .btn
    background-color #172F6D
    line-height 5rem
    height 5rem
    color #fff
    border-radius 100px
    width 92%
    margin-left 4%
    margin-top 1rem
    display block
    font-weight 500
    font-size 1.7rem
    text-align center
  .vux-cell-box
    position absolute
    width 100%
    top 0
  .vux-datetime
    position absolute
    width 100%
    z-index 99
    top 0
</style>
